<template>
  <div class="work">

    <div class="search">
        <div class="title">
          Reimbursement Management
        </div>
        <div style="width:30%">
            <el-input v-model="searchName" placeholder="please enter">
                <el-button @click="search" slot="append">search</el-button>
                <el-button @click="clearSearch" slot="append">cancel search</el-button>
            </el-input>
        </div>
    </div>

    <!-- <el-tabs type="border-card" v-model="activeName" @tab-click="updateData">
      <el-tab-pane label="全部报销单"> -->
        <template>
          <el-table
            :header-cell-style="{background:'#F2F6FC',color:'#606266'}"
            :data="allEA"
            border
            style="width: 100%"
            ref="allEA"
            class="emp_table"
            v-if="allEA">
            <el-table-column label="S/N" type="index" width="60" align="center"></el-table-column>
            <el-table-column
              align="center"
              prop="expense_id"
              label="Expense Account ID">
            </el-table-column>
            <el-table-column
              align="center"
              prop="expense_name"
              label="Name">
            </el-table-column>
            <el-table-column
              align="center"
              prop="expense_pe_name"
              label="Applicant">
            </el-table-column>
            <el-table-column
              align="center"
              prop="expense_project_name"
              label="Project">
            </el-table-column>
            <el-table-column
              align="center"
              prop="total_amount"
              label="Amount">
            </el-table-column>
            <el-table-column
              align="center"
              prop="expense_payment_currency"
              label="Payment Currency">
            </el-table-column>
            <el-table-column
              align="center"
              prop="expense_type"
              label="Type">
            </el-table-column>
            <el-table-column
              align="center"
              prop="expense_submit_time"
              label="Submit Time">
            </el-table-column>
            <el-table-column
              align="center"
              prop="status_name"
              label="Status">
            </el-table-column>
            <el-table-column
              align="center"
              label="Action">
              <template slot-scope="scope">
                 <el-button type="text" size="small" @click="see(scope.row)">see details</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-pagination
          align="right"
          @current-change="curPageChange"
          :current-page.sync="allCuPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="count">
        </el-pagination>
      <!-- </el-tab-pane> -->

      <!-- <el-tab-pane label="待审核报销单">
        <template>
          <el-table
            :header-cell-style="{background:'#F2F6FC',color:'#606266'}"
            :data="pendingReviewEA"
            border
            style="width: 100%"
            ref="pendingReviewEA"
            class="emp_table"
            v-if="pendingReviewEA">
            <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
            <el-table-column
              align="center"
              prop="expense_id"
              label="报销编号">
            </el-table-column>
            <el-table-column
              align="center"
              prop="expense_name"
              label="报销单名称">
            </el-table-column>
            <el-table-column
              align="center"
              prop="expense_pe_name"
              label="报销人">
            </el-table-column>
            <el-table-column
              align="center"
              prop="expense_project_name"
              label="所属项目">
            </el-table-column>
            <el-table-column
              align="center"
              prop="total_amount"
              label="报销金额">
            </el-table-column>
            <el-table-column
              align="center"
              prop="expense_payment_currency"
              label="支付币种">
            </el-table-column>
            <el-table-column
              align="center"
              prop="expense_type"
              label="报销类型">
            </el-table-column>
            <el-table-column
              align="center"
              prop="expense_submit_time"
              label="提交日期">
            </el-table-column>
            <el-table-column
              align="center"
              prop="status_name"
              label="审批节点">
            </el-table-column>
            <el-table-column
              align="center"
              label="操作">
              <template slot-scope="scope">
                 <el-button type="text" size="small" @click="examine(scope.row)">去审核</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-pagination
          align="right"
          @size-change="handleSizeChange"
          @current-change="curPageChange"
          :current-page.sync="reviewCuPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="reviewCount">
        </el-pagination>
      </el-tab-pane> -->
    <!-- </el-tabs> -->

    <seeForm ref="seeForm"></seeForm>
    <auditForm ref="auditForm"></auditForm>

  </div>

</template>

<script>
import {getReimbursementlist} from '@/request/other_api'
import seeForm from "./seeForm";
import auditForm from './auditForm';

export default {
  components:{
    seeForm,
    auditForm,
  },
  data() {
    return {
      //所有报销单
      allEA: "",
      //待审核的报销单
      pendingReviewEA: "",
      //输入的查询字符串
      searchName: '',
      // //当前选中的是所有列表还是待审核列表
      // activeName: 0,
      //所有报销单列表当前页码
      allCuPage:1,
      //所有报销单总数据量
      count:0,
      //待审核报销单列表当前页码
      // reviewCuPage:1,
      // //待审核报销单总数据量
      // reviewCount:0,
      // 等级
      level:'',
      //当前是否在搜索状态
      isSearch:false
    }
  },
  created() {
      getReimbursementlist({
        isAll:0
      }).then(res =>{
          if(res.code == 200) {
              this.allEA = res.data
              this.count = res.count
          }
      })
  },
  mounted () {
    const token = sessionStorage.getItem('token')
    this.level = sessionStorage.getItem('level')
  },
  methods: {
    //点击tab栏时更新数据
    // updateData(tab,event){
    //   if(tab.index == 0){
    //     getReimbursementlist({
    //       isAll:0
    //     }).then(res =>{
    //         if(res.code == 200) {
    //             this.allEA = res.data
    //             this.count = res.count
    //         }
    //     })
    //     this.projectSearchStr = ''
    //     this.allCuPage = 1
    //   }
    //   if(tab.index == 1){
    //     getReimbursementlist({
    //         isAll:1
    //     }).then(res =>{
    //         if(res.code == 200) {
    //             this.pendingReviewEA = res.data
    //             this.reviewCount = res.count
    //         }
    //     })
    //     this.projectSearchStr = ''
    //     this.reviewCuPage = 1
    //   }
    // },
    //查看报销单详情
    see(data){
      let routeData = this.$router.resolve(`/reimbursementDetail/${data.expense_id}?type=true`)
      window.open(routeData.href, '_blank')
    },
    //搜索
    search(){
        // if(this.activeName == 0) {
        this.isSearch = true
        getReimbursementlist({
          isAll:0,
          keyword:this.searchName,
        }).then(res =>{
          if(res.code == 200){
            this.count = res.count
            this.allEA = res.data
            }
        })
        this.allCuPage = 1
        // }
        // if (this.activeName == 1) {
        //     getReimbursementlist({
        //       page:this.reviewCuPage,
        //       isAll:1,
        //       keyword:this.searchName,
        //     }).then(res =>{
        //         if (res.code == 200) {
        //             this.reviewCount = res.count
        //             this.pendingReviewEA = res.data
        //         }
        //     })
        //     this.searchName = ''
        //     this.reviewCuPage = 1
        // }
    },
    //取消搜索
    clearSearch(){
        // if (this.activeName == 0) {
          this.isSearch = false
          getReimbursementlist({
            isAll:0,
          }).then(res =>{
          if(res.code == 200){
            this.count = res.count
            this.allEA = res.data
            }
        })
          this.searchName = ''
          this.allCuPage = 1
        // }
        // if (this.activeName == 1) {
        //     this.getPendingReview()
        // }
    },
    //去审核
    examine(data){
        this.$refs.auditForm.dialogVisible = true
        this.$refs.auditForm.seeMyReimbursementDetail(data.expense_id)
    },
    //  点击每页刷新获取数据
    curPageChange (currentPage) {
      // if(this.activeName == 0){
        if(this.isSearch) {
          this.allCuPage = currentPage
          this.getSearchPage()
        } else {
          this.allCuPage = currentPage
          this.getAllPage()
        }
      // }
      // if(this.activeName == 1){
      //   this.currentPageAdded = currentPage
      //   this.getPendingReview()
      // }
    },
    // 上一页
    prevClick () {
      // if(this.activeName == 0){
        if(this.isSearch) {
          this.allCuPage < 1 ? this.allCuPage = 1 : this.allCuPage--
          this.getSearchPage()
        } else {
          this.allCuPage < 1 ? this.allCuPage = 1 : this.allCuPage--
          this.getAllPage()
        }
      // }
      // if(this.activeName == 1){
      //   this.currentPageAdded < 1 ? this.currentPageAdded = 1 : this.currentPageAdded--
      //   this.getPendingReview()
      // }
    },
    // 下一页
    nextClick () {
      // if(this.activeName == 0){
        if(this.isSearch) {
          this.allCuPage >= this.count ? this.allCuPage = this.count : this.allCuPage++
          this.getSearchPage()
        } else {
          this.allCuPage >= this.count ? this.allCuPage = this.count : this.allCuPage++
          this.getAllPage()
        }
      // }
      // if(this.activeName == 1){
      //   this.currentPageAdded >= this.count ? this.currentPageAdded = this.count : this.currentPageAdded++
      //   this.getPendingReview()
      // }
    },
    //搜索报销单分页
    getSearchPage(){
      getReimbursementlist({
        page:this.allCuPage,
        isAll:0,
        keyword:this.searchName,
      }).then(res =>{
        if(res.code == 200){
          this.count = res.count
          this.allEA = res.data
        }
      })
    },
    //全部报销单分页
    getAllPage(){
      getReimbursementlist({
        page:this.allCuPage,
        isAll:0
      }).then(res =>{
        if(res.code == 200){
          this.count = res.count
          this.allEA = res.data
        }
      })
    },
    // getPendingReview(){
    //   getReimbursementlist({
    //     page:this.reviewCuPage,
    //     isAll:1
    //   }).then(res =>{
    //     if(res.code == 200){
    //       this.reviewCount = res.count
    //       this.pendingReviewEA = res.data
    //     }
    //   })
    // }
  },
}
</script>

<style lang="less">
.title{
  font-family: SourceHanSansSC;
  font-weight: 700;
  font-size: 20px;
  color: rgb(16, 16, 16);
  font-style: normal;
  letter-spacing: 0px;
  line-height: 30px;
  text-decoration: none;
  margin-bottom: 10px;
}
.search {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.permitImg{
  width: 35px;
  height: 35px;
}
.dig-form{
  width: 90%;
  height: 100%;
  margin: 0 auto;
}
.preImg{
  width:56px;
  border-radius:4px;
  height:40px;
  margin-right:15px
}
</style>
